<template>
	<conf-module-container ref="refConfModuleContainer" v-if="!route.meta.LayoutNoSideMenu" class="system-manage" :content-custom="true">
		<template #Slot-Conf-Module-Header>
			<div class="system-header">
				<span class="large-title">{{ props.pageTitle }}</span>

				<div class="page-btn">
					<template :key="item.key" v-for="item in routeList">
						<a-button type="text" :class="['btn', route.path === item.path && 'btn--active']" @click="gotoPath(item)">{{
							item.name
						}}</a-button>
					</template>
				</div>
			</div>
		</template>

		<template #Slot-Conf-Module-custom-Content>
			<router-view></router-view>
		</template>
	</conf-module-container>
	<router-view v-else></router-view>
</template>

<script lang='ts' setup>
import { ref , onBeforeMount} from 'vue';
import { ConfModuleContainer } from '../../index';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

interface pageItem {
	name: string;
	key: string;
	path: string;
}
const props = defineProps({
	pageTitle: { type: String, default: '页面标题' },
	menu: { type: Array, default: [] },
	secondPageKey: { type: String, default: '' }
});;
const nowPageKey = ref('');

const gotoPath = (item: pageItem) => {
	router.replace(item.path);
	nowPageKey.value = item.key;
};
const routeList = ref<any[]>([]);
const getCurrentChildPageCode = () => {
	// 因菜单权限的btnCode没有设计包含三级菜单的原因。导致二级下面有页面权限，但是按钮权限没有出现
	if (sessionStorage.getItem('flatMenus')) {
		const sysMenus = JSON.parse(sessionStorage.getItem('flatMenus') as string);
		let systemManageMenu = sysMenus.filter((item: { code: string }) => item.code === 'config-manage-system-manage');
		console.log('6666', sysMenus, systemManageMenu);

		let systemCode = systemManageMenu[0].childList.map((item: { code: any }) => item.code);
		return systemCode;
	}
	return [];
};

onBeforeMount(() => {
  if (route.path === props.secondPageKey) {
		// 1、获取系统管理下的children页面code
		let menuGetCode = getCurrentChildPageCode();
		let currentTabCode: string[] = [];
		// 2、当前页面的btnCode
		if (sessionStorage.getItem('curPageBtnCodes')) {
			currentTabCode = JSON.parse(sessionStorage.getItem('curPageBtnCodes') as string);
		}
		// 3、将系统管理下的children页面code加入到二级页面的btnCode
		let mergedArray: string[] = currentTabCode.concat(menuGetCode);
		currentTabCode = [...new Set(mergedArray)];

		// 过滤tab权限
		routeList.value = props.menu.filter((item:any) => currentTabCode.includes(item.key));

		// 存系统管理-可以访问的页面tab权限
		sessionStorage.setItem('systemPageData', JSON.stringify(routeList.value));
		if (routeList.value.length > 0) {
			router.push(routeList.value[0].path);
		}
		return;
	}
	// 系统管理的child页面 加载页面tab权限
	routeList.value = JSON.parse(sessionStorage.getItem('systemPageData') as string);
});

</script>

<style lang='less' scoped>
.system-manage {
	.system-header {
		display: flex;
		color: @text02;
		align-items: center;

		.large-title {
			display: block;
			height: 30px;
			margin-right: 32px;
			font-size: 20px;
			font-weight: 700;
			line-height: 30px;
			color: rgba(240, 246, 252, 0.95);
		}

		.page-btn {
			display: flex;
			align-items: center;
			gap: 6px;

			.btn {
				display: inline-block;
				height: 30px;
				padding: 0 12px;
				font-size: 14px;
				font-weight: 700;
				line-height: 30px; /* 157.143% */
				color: @text02;

				&--active {
					color: @text01;
					background: rgba(240, 246, 252, 0.1);
				}
			}
		}
	}
}
</style>